<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <div
        v-for="(item, index) in printData"
        :key="index"
        style="width: 800px;height: 1100px;padding: 10px;font-size: 25px;
  page-break-after:always;display: flex;flex-direction: column;
  justify-content: center;align-items: center;"
      >
        <div
          style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;
        font-size: 35px;font-weight: bold;padding-top: 40px;padding-bottom: 30px;
        "
        >
          {{ item.palletBatchCode }}
        </div>
        <div
          ref="barCode"
          style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;
          padding-bottom: 30px;
        "
        >
          <JLBarCode :code="item.palletBatchBarCode" />
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">物料编码 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.materialCode }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">物料名称 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.materialName }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">物料状态 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.stateName }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">规格型号 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.model }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">托批次数量 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.num }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">下道工序 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.nextProcessName }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">时间 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.inTime }}</div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;justify-content: center;align-items: center;">
          <div style="width: 40%;display: flex;justify-content: flex-end;align-items: center;">备注 :</div>
          <div style="flex: 1;padding-left: 20px;display: flex;align-items: center;">{{ item.remark }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import JLBarCode from '@/components/JLink/JLBarCode' // 打印组件
export default {
  name: 'PrintPalletBatch',
  components: { JLBarCode }, // 组件注册
  props: {
    printData: {}
  },
  data() {
    return {
    }
  },
  watch: {
    printData(val) {
      console.log(val)
      if (val.length > 0) {
        setTimeout(() => {
          this.print()
        }, 200)
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
      // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    }
  }
}
</script>
<style scoped>
</style>
